<template>
  <div class="real-time-clock">
   <span style="color:rgb(46,149,240)">{{formattedTime[0]}}</span> {{ formattedTime[1] }}
  </div>
</template>

<script>
export default {
  name: "RealTimeClock",
  data() {
    return {
      currentTime: new Date(), // 初始化当前时间
    };
  },
  computed: {
    formattedTime() {
      // 格式化日期为 2024.04.01 星期四 12:15:35
      const year = this.currentTime.getFullYear();
      const month = String(this.currentTime.getMonth() + 1).padStart(2, "0");
      const date = String(this.currentTime.getDate()).padStart(2, "0");

      const dayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const day = dayNames[this.currentTime.getDay()];

      const hours = String(this.currentTime.getHours()).padStart(2, "0");
      const minutes = String(this.currentTime.getMinutes()).padStart(2, "0");
      const seconds = String(this.currentTime.getSeconds()).padStart(2, "0");

      return [`${year}.${month}.${date} ${day}`,`${hours}:${minutes}:${seconds}`];
    },
  },
  methods: {
    updateTime() {
      this.currentTime = new Date(); // 更新当前时间
    },
  },
  mounted() {
    this.timer = setInterval(this.updateTime, 1000); // 每秒更新一次
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器，防止内存泄漏
  },
};
</script>

<style scoped>
.real-time-clock {
  font-weight: bold;
  //font-size: 1.5em;
  //font-family: Arial, sans-serif;
  //text-align: center;
}
</style>
